<template>
	<view class="bl-container">
    <t-header @back="clickNavBackFn">银行卡列表</t-header>
		<!-- content -->
		<view class="bl-content">
			<view class="cell" @click="jump('')" v-if="list.length==0">
				<text>绑定银行卡</text>
				<image src="@/static/images/icons/icon_wallet_bank_edit.png" mode="" />
			</view>
			<view class="bankcard flex align-center justify-between" v-for="(item,index) in list" :key="index">
				<view class="">
					<view class="text-xl boxshow">{{ item.name }}</view>
					<view class="margin-top boxshow">开户支行：{{ item.khzhihang }}</view>
					<view class="num boxshow">{{ item.account }}</view>
				</view>
				<tui-button @click="edit" :index="index" type="theme" shape="circle" width="130rpx" height="80rpx">修改</tui-button>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref} from 'vue';
import {onShow} from '@dcloudio/uni-app';

import THeader from '@/components/views/t-header/index.vue'; // 头部组件

// api
import {bankList} from '@/api/user.js';

const list = ref([]);

onShow(() => {
	bankList().then(res => {
		if(res.data){
			list.value = res.data.list.data;
		}
	});
});

// 点击返回
const clickNavBackFn = () => {
	const pages = getCurrentPages();
	if (pages.length >= 2) {
		uni.navigateBack();
	} else {
		uni.switchTab({
			url: '/pages/my/index'
		});
	}
};

const edit = (e) => {
	let item = list.value[e.index];
	uni.navigateTo({
		url: '/pages/bankList/bank/bank?card=' + JSON.stringify(item),
		animationType: 'pop-in'
	})
};
const jump = () => {
	uni.navigateTo({
		url: '/pages/bankList/bank/bank',
		animationType: 'pop-in'
	})
};
</script>

<style lang='scss' scoped>
.bl-container {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	background: #F5F5F5;
	box-sizing: border-box;

	.bl-content {
		overflow-y: auto;
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 0 18rpx 26rpx;
		
		.cell {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding:30rpx 20rpx;
			border-radius: 16rpx;
			box-shadow: 0 0rpx 16rpx rgba(0, 0, 0, 0.14);
			
			image {
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.bankcard {
			height: 300rpx;
			padding: 25rpx;
			border-radius: 16rpx;
			background:url(@/static/images/vip-card.png) no-repeat;
			background-size: 100% 100%;
			
			&:not(:first-child) {
				margin-top: 30rpx;
			}
			
			.boxshow {
				color: #88662d;
				text-shadow: 2rpx 2rpx 5rpx #f2b44d;
			}
			
			.num {
				margin-top: 80rpx;
				font-size: 42rpx;
				letter-spacing: 0.1em;
			}
		}
	}
}
</style>
